<template>
    <page-view>
      <el-card>
        <template #header>
          <div class="flex flex-row justify-between">
            <div class="font-bold">新增管理员</div>
          </div>
        </template>
        <!--表单-->
        <el-form label-width="140px" :model="adminInfoData" :rules="adminInfoDataRules" ref="formEl">
          <el-form-item label="管理员名称名称" prop="admin_name">
            <el-input placeholder="请输入管理员名称" v-model="adminInfoData.admin_name" />
          </el-form-item>
          <el-form-item label="性别" prop="admin_sex" >
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="adminInfoData.admin_sex" class="ml-4">
                <el-radio label="男" size="large">男</el-radio>
                <el-radio label="女" size="large">女</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="手机号" prop="admin_tel">
            <el-input placeholder="请输入手机号" v-model="adminInfoData.admin_tel" />
          </el-form-item>
          <el-form-item label="邮箱" prop="admin_email">
            <el-input placeholder="请输入邮箱" v-model="adminInfoData.admin_email" />
          </el-form-item>
          <el-form-item label="头像" prop="admin_photo">
            <el-upload v-loading="isUploadingImg" element-loading-text="正在上传图片"
              :action="baseURL + '/adminInfo/uploadAdminPhoto'" 
              :headers="{ softeem_ele_admin_token: store.token }" name="admin_photo"
              class="w-[200px] h-[200px] border border-dashed border-gray-400 flex flex-row justify-center items-center"
              :before-upload="beforeUpload" :show-file-list="false" :on-success="uploadSuccess">
              <el-image :src="baseURL + adminInfoData.admin_photo" v-if="adminInfoData.admin_photo" fit="contain"
                class="w-full h-full" lazy>
                <template #placeholder>
                  <div class="text-primaryColor text-[14px] w-full h-full flex flex-row justify-center items-center">
                    正在加载图片...</div>
                </template>
              </el-image>
              <el-icon size="65px" color="#808080" v-else>
                <PictureFilled />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="管理员" prop="admin_type">
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="type[adminInfoData.admin_type]" class="ml-4">
                <el-radio label="普通管理员" size="large">普通管理员</el-radio>
                <el-radio label="超级管理员" size="large">超级管理员</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="isSubmiting" :loading-icon="Loading">保存数据
            </el-button>
            <el-button type="danger" @click="resetForm">重置表单</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </page-view>
  </template>
    
  <script setup>
  import { PictureFilled, Loading } from "@element-plus/icons-vue";
  import { ElNotification } from "element-plus";
  import { reactive, ref, inject } from "vue";
  import API from "@/utils/API/index.js";
  import { mainStore } from "../../store/index.js";
  import { useRouter ,useRoute} from "vue-router";
  
  const store = mainStore();
  const baseURL = inject("baseURL");
  const router = useRouter();
  const route = useRoute();
  //表单上面的数据
  const adminInfoData = ref({
    id:"",
    admin_name:"",
    admin_pwd:"",
    admin_sex:"男",
    admin_tel:"",
    admin_email:"",
    admin_photo:"",
    admin_type:0
  });
  
  const type=reactive(["普通管理员","超级管理员"])
  //表单验证的规则
  const adminInfoDataRules = {
    admin_name: [{ required: true, message: "请输入管理员名称", trigger: "blur" }],
    admin_pwd: [{ required: true, message: "请输入管理员密码", trigger: "blur" }],
    admin_tel: [{ required: true, message: "请输入管理员电话号码", trigger: "blur" }],
    admin_photo: [{ required: true, message: "请选择管理员头像", trigger: "blur" }],
  }
  
 
    

  //开始上传图片之前的操作
  const isUploadingImg = ref(false);
  const beforeUpload = (rawFile) => {
    let reg = /^image\/(jpe?g|png|webp|gif|bmp)$/;
    if (reg.test(rawFile.type)) {
      //说明是个图片
      if (rawFile.size / 1024 / 1024 > 5) {
        //说明图片大于5M
        ElNotification({
          type: "error",
          title: "错误",
          message: "图片的大小不能大于5M"
        });
        return false;
      } else {
        //开始上传了
        isUploadingImg.value = true;
      }
    } else {
      //说明不是一个图片
      ElNotification({
        type: "error",
        title: "错误",
        message: "请选择图片文件，图片格式必须是jpg,jpeg,png,webp,gif,bmp格式"
      });
      return false;
    }
  }
  
  const uploadSuccess = (result) => {
    console.log(result.data);
   adminInfoData.value.admin_photo= result.data;
    isUploadingImg.value = false;
  }
  
  
  //提交表单
  const formEl = ref(null);
  const submitForm = () => {
    //验证表单的数据是否合格
    // console.log(formEl.value)
    formEl.value.validate(valid => {
      //这个valid就是验证的结果
      if (valid) {
        //表单验证成功，我们要提交数据
        addAdminInfo();
      } else {
        ElNotification({
          type: "warning",
          title: "提示",
          message: "请正确的填写表单的内容"
        })
      }
    });
  }
  
  //编写一个方法
  const isSubmiting = ref(false);
  const addAdminInfo = () => {
    isSubmiting.value = true;
    API.adminInfo.add(adminInfoData.value)
      .then(result => {
        ElNotification({
          type: "success",
          title: "提示",
          message: "新增菜品成功"
        });
        router.replace({ name: "AdminInfoList" });
  
      })
      .catch(error => {
        ElNotification({
          type: "danger",
          title: "失败了",
          message: "新增菜品失败，请重试或联系管理员"
        });
        console.log(error);
      })
      .finally(() => {
        isSubmiting.value = false;
      })
  }
  
  //重置表单
  
  const resetForm = () => {
   
    formEl.value.resetFields();
  }
  
  </script>
    
  <style scoped lang="scss">
  :deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
  }
  </style>